css基础-uniapp

(一) css基础

常用css样式目录

选择器和选择器优先级
三个简单样式
- 边框border
- 宽高设置
- 背景颜色
圆角设置
文字大小、颜色、行高、加粗
margin 外边距设置
padding 内边距设置

例1. 选择器和选择器优先级

例1.1 元素选择器和类选择器

<template>
	<view class="">
		<view class="aa bb">11111111</view>
		<view class="aa">222222</view>
	</view>
</template>

<style>
	/* 元素选择器,选择所有的view元素, 给其添加边框 */
	view {
		/* 对边框进行设置 */
		border:1px solid red;
	}
	/* 类选择器 选择class="aa" 的元素进行设置*/
	.aa {
		font-size: 30px;
	}
	.bb {
		/* 设置字体颜色 选择class="bb"的元素进行设置*/
		color: red;
	}
</style>

例1.2 后代选择器

<template>
	<view class="">
		<view class="aa">
			<text>111</text>
			<text>222</text>
			<text>333</text>
		</view>
		<view class="bb">
			<text>111</text>
			<text>222</text>
			<text>333</text>
		</view>
	</view> 
</template>

<style>
	.aa text {
		color:red;
	}
	.bb text {
		font-size: 30px;
	} 
</style>

例1.3 群组选择器

<template>
	<view class="">
		 <view class="aa">
		 	aaaaaaaaa
		 </view>
		 <view class="bb">
		 	bbbbbbb
		 </view>
		 
		 <text>text222222</text>
	</view> 
</template>

<style>
	.aa,.bb,text {
		color: red;
	}
</style>

例1.4 选择器优先级

同等情况下, 后面的会覆盖前面的
选择器越长越优先

<template>
	<view class="box">
		<view class="aa bb">
			哈哈哈哈
		</view>
	</view>
</template>

<style>
	/* 2.选择器越长越优先 */
	.box .aa {
		color: yellow;
	}

	.aa {
		color: red;
	}

	/* 1.同等情况下, 后面的会覆盖前面的 */
	.bb {
		color: green;
	}
</style>

例2. 边框宽高背景

<template>
	<view class="box">
		 222222222
	</view>
</template>

<style>
	 .box {
		/* border: 10px solid red; */
		border-bottom: 5px solid red;
		/* 宽高 */
		width: 300rpx;
        width: 20%; /*百分比相对于父元素*/
		height: 300rpx;
		/* 背景 */
		background-color: aqua;
	 } 
</style>

例3. 圆角设置

<template>
	<view class="box">
		 <view class="aa"></view>
		 <view class="bb"></view>
	</view>
</template> 

<style>
	.aa {
		border: 1px solid red;
		width: 200px;
		height: 100px;
		/* 设置圆角 */
		border-radius: 50px;
	} 
	.bb {
		margin: 50px;
		border: 1px solid blue;
		width: 200px;
		height: 200px;
		border-radius: 50%;
	} 
</style>

例4. 文字大小、颜色、行高、加粗

<template>
	<view class="box">
		 哈哈哈哈哈哈哈哈哈哈哈
		 哈哈哈哈哈哈哈哈哈哈哈
		 哈哈哈哈哈哈哈哈哈哈哈
		 哈哈哈哈哈哈哈哈哈哈哈
		 哈哈哈哈哈哈哈哈哈哈哈
		 哈哈哈哈哈哈哈哈哈哈哈
		 哈哈哈哈哈哈哈哈哈哈哈
		 哈哈哈哈哈哈哈哈哈哈哈
	</view>
</template> 

<style>
	.box {
		width: 600px;
		/* height: 100px; */
		/* border: 1px solid; */
		/* 文字大小 */
		font-size: 30px;
		/* 文字颜色 */
		color: #999;
		/* 设置行高 */
		/* line-height: 50px; */
		line-height: 1; /*1倍字体大小*/
		/* 字体加粗 */
		font-weight: bold;
	}
</style>

例5. margin外边距设置

元素边框跟外边的距离

<template>
	<view class="box">
		 <view class="aa"></view>
		 <view class="bb"></view>
	</view>
</template> 

<style>
	.aa,.bb {
		border: 1px solid red;
		width: 300px;
		height: 150px;
	} 
	.aa {
		/* 跟上面的距离为20px */
		margin-top: 20px;
		margin-left: 20px;
		margin-right: 20px;
		margin-bottom: 20px;
	}
	.bb {
		/* 合并写法 */
		margin:20px;
	} 
</style>

例6. padding 内边距

元素边框跟元素内容的距离

<template>
	<view class="box">
		 哈哈哈哈哈哈哈哈哈
		 哈哈哈哈哈哈哈哈哈
		 哈哈哈哈哈哈哈哈哈
		 哈哈哈哈哈哈哈哈哈
		 哈哈哈哈哈哈哈哈哈 
	</view>
</template> 

<style>
	.box {
		width: 300px;
		border: 1px solid red;
		/* padding-top: 10px;
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 10px; */
		
		/* 合并写法 */
		padding: 10px;
	} 
</style>

(二) css进阶

(1) 定位

例1. 固定定位

例1.1 简单例子

<template>
	<view class="box">
		<text>test</text>
	</view>
</template>

<style>
	text {
		width: 100px;
		border: 1px solid red;
		background-color: gray;
		padding: 5px;
		/* 1.将text元素设置为固定定位 */
		position: fixed;
		/* 2.设置text元素在网页中的位置 */
		/* top: 10px; */
		/* left: 20px; */
		right: 20px;
		bottom: 20px;
	}
</style>

例1.2 半透明遮罩层

<template>
	<view class="box">
		 222222222222
	</view>
</template>

<style>
	 .box {
		 position: fixed;
		 background-color: rgba(0, 0, 0, 0.5);
		 top: 0;
		 bottom: 0%;
		 left: 0;
		 right: 0;
	 }
</style>

例2. 相对定位和绝对定位

例2.1 一个简单例子

<template>
	<view class="box">
		<view class="aa">
			托尔斯泰
		</view>
	</view>
</template>

<style>
	.box {
		border: 1px solid red;
		height: 300px;
		width: 300px;
		/* 1.父元素设置为相对定位 */
		position: relative;
	}
	.aa {
		background-color: aqua;
		width: 100px;
		height: 50px;
		/* 2.子元素设置为绝对定位 */
		position: absolute;
		/* 3.设置子元素在父元素中的位置 */
		bottom: 0;
		right: 0;
	} 
</style>

例2.2 购物车上的数字

<template>
	<view class="box">
		<image src="../../static/img/cart.png" mode=""></image>
		<view class="aa">
			8
		</view>
	</view>
</template>

<style>
	.box {
		margin: 50px; 
		height: 100px;
		width: 100px;
		/* 1.父元素设置为相对定位 */
		position: relative;
	}
	image {
		width: 100px;
		height: 100px;
	}
	.aa {
		background-color: red; 
		color: #fff; /*白色*/
		width: 30px;
		height: 30px;
		border-radius: 50%;
		/* 2.子元素设置为绝对定位 */
		position: absolute;
		/* 3.设置子元素在父元素中的位置 */
		 right: -10px;
		 top:-6px;
	} 
</style>

(2) 盒子尺寸计算方式

<template>
	<view class="box">
		 222222222
	</view>
</template> 

<style>
	.box {
		width: 100%;
		border: 5px solid red;
		padding: 50px;
		/* box-sizing 设置盒子尺寸计算方式*/
		/* 设置为border-box的时候, 被元素加边框和padding, 元素不会变大 */
		box-sizing: border-box;
	} 
</style>

(3) 弹性盒子

例1. 水平对齐和垂直对齐方式

<template>
	<view class="box">
		 <view class="item">1</view>
		 <view class="item">2</view>
		 <view class="item">3</view> 
		 <text>5</text>
	</view>
</template> 

<style>
	.box {
		border: 1px solid red;
		height: 300px;
		/* 将父元素设置为弹性盒子 */
		display: flex;
		
		/* 水平方向的五种对齐方式 */ 
		justify-content: center; /*居中*/
		justify-content: flex-end; /*右对齐*/
		justify-content: flex-start; /*左对齐*/
		
		/* 两端对齐和分散对齐 */
		justify-content: space-between;
		justify-content: space-around;
		
		/* 垂直方向的三种对齐方式 */
		align-items: center;
		align-items: flex-end;
		align-items: flex-start;
		
	}
	 .item,text {
		 border: 1px solid gray;
		 width: 60px;
		 height: 50px;
	 }
</style>

例2. 剩余空间分配

例21. 剩余空间分配

<template>
	<view class="box">
		<view class="item a">1</view>
		<view class="item b">2</view>
		<view class="item c">3</view> 
	</view>
</template> 

<style>
	.box {
		display: flex; 
		height: 300px;
		border: 1px solid blue;
	}
	.item {
		width: 60px;
		 height: 50px;
		 border: 1px solid red;
	}
	.a {
		flex-grow: 1;
	}
	.b {
		flex-grow: 3;
	}
	.c {
		flex-grow: 1;
	}
</style>

例2.2 剩余空间分配应用

<template>
	<view class="box">
		<image src="https://pic.maizuo.com/usr/movie/6d31257bd0c897f0a953b7097853d627.jpg" mode=""></image>
		<view class="aa">
			pppppppp
		</view>
		<text>购票</text>
	</view>
</template> 

<style>
	.box {
		 border: 1px solid red;
		 padding: 10px;
		 display: flex;
		 justify-content: space-between;
		 align-items: center;
	} 
	image {
		width: 66px;
		height: 100px;
	}
	.aa {
		border: 1px solid blue;
		flex-grow: 1;
		margin-left: 5px;
	}
	text {
		border: 1px solid;
		width: 60px;
		height: 30px;
	} 
</style>

例3. 子元素纵向排列

<template>
	<view class="box">
		<view class="item">1</view> 
		<view class="item">2</view> 
		<view class="item">3</view> 
	</view>
</template> 

<style>
	.box {
		 border: 1px solid red;
		 height: 300px;
		 display: flex;
		 /* 设置子元素排列方式 */
		 flex-direction: column;
		 /* 纵向排列之后, 对齐方式跟原来相反 */
		 align-items: center;
		 justify-content: space-around;
	} 
 
	.item {
		width: 100px;
		height: 50px;
		border: 1px solid;
	} 
</style>

应用: 电影个人中心的订单

<template>
	<view class="box">
		<view class="item">
			<text class="iconfont icon-dianyingpiaoiocn"></text>
			<text>电影</text>
		</view> 
		<view class="item">
			<text class="iconfont icon-31quanbushangpin"></text>
			<text>商品</text>
		</view> 
	</view>
</template> 

<style>
	page {
		background-color: #f4f4f4;
	}
	.box { 
		 height: 160rpx;
		 display: flex; 
		 align-items: center;
		 justify-content: space-around;
		 background-color: #fff;
	} 
 
	.item { 
		 width: 50%;
		 height: 100%;
		 /* 设置为弹性盒子 */
		 display: flex;
		 /* 子元素排成一列 */
		 flex-direction: column;
		 align-items: center;
		 justify-content: center;
		 
	} 
	.iconfont {
		font-size: 40px;
	}
	.icon-dianyingpiaoiocn {
		color: #f03d37;
	}
	.icon-31quanbushangpin {
		color: #55dac8;
	} 
</style>

例4. 多行排列

使用flex-wrap来设置是否要换行

<template>
	<view class="box">
		<view class="item">
			<image src="http://static.huruqing.cn/fresh/r1.png" mode=""></image>
			<text>时令鲜果</text>
		</view>
		<view class="item">
			<image src="http://static.huruqing.cn/fresh/r1.png" mode=""></image>
			<text>时令鲜果</text>
		</view>
		<view class="item">
			<image src="http://static.huruqing.cn/fresh/r1.png" mode=""></image>
			<text>时令鲜果</text>
		</view>
		<view class="item">
			<image src="http://static.huruqing.cn/fresh/r1.png" mode=""></image>
			<text>时令鲜果</text>
		</view>
		<view class="item">
			<image src="http://static.huruqing.cn/fresh/r1.png" mode=""></image>
			<text>时令鲜果</text>
		</view>
		<view class="item">
			<image src="http://static.huruqing.cn/fresh/r1.png" mode=""></image>
			<text>时令鲜果</text>
		</view>
		<view class="item">
			<image src="http://static.huruqing.cn/fresh/r1.png" mode=""></image>
			<text>时令鲜果</text>
		</view>
		<view class="item">
			<image src="http://static.huruqing.cn/fresh/r1.png" mode=""></image>
			<text>时令鲜果</text>
		</view>
	</view>
</template>

<style>
	page {
		background-color: #f4f4f4;
	}

	.box {
		background-color: #fff;
		display: flex;
		/* 排不下的时候, 换行 */
		flex-wrap: wrap;
	}

	.item {
		width: 25%;
		height: 95px;
		/* 添加边框, 元素不变大 */
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.item image {
		width: 45px;
		height: 45px;
	}
</style>

(4) 子元素在父元素内水平居中垂直居中

用弹性盒子(略)

使用相对定位和绝对定位

<template>
	<view class="box">
		<view class="aa">

		</view>
	</view>
</template>

<style>
	.box {
		border: 1px solid red;
		height: 300px;
		width: 300px;
		position: relative;
	}

	.aa {
		border: 1px solid blue;
		width: 100px;
		height: 100px;
		/* border-radius: 50%; */
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -50px;
		margin-top: -50px;
	}
</style>

应用

<template>
	<view class="box">
		<image class="bg" src="http://p0.meituan.net/moviemachine/85421c24ca4a9bfcec76e4af80188fa8208505.png" mode=""></image>	
		<image class="play" src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/media/video-btn-play.png" mode=""></image>
		 
	</view>
</template>

<style>
	.box {
		/* border: 1px solid red; */
		position: relative;
	}
	.bg {
		width: 100%;
		height: 250px;
	}
	.play {
		width: 80px;
		height: 80px;
		position: absolute;
		top:50%;
		left: 50%;
		margin-left: -40px;
		margin-top: -20px;
	} 
</style>

(三) 静态页面实战

(1) 个人中心

http://fresh.huruqing.cn

<template>
	<view>
		 <u-navbar
				title="个人中心" 
				leftText="返回"
				:autoBack="true"
			>
		</u-navbar>
		
		<!-- 头部 header --> 
		<view class="header">
			<image src="http://fresh.huruqing.cn/img/bg2.78d35cdc.png" mode=""></image>
			<text>立即登录</text>
		</view>
		
		<!-- 列表 list -->
		<view class="list">
			<view class="item">
				<text>我的订单</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
			 <view class="item">
			 	<text>收藏</text>
			 	<u-icon name="arrow-right"></u-icon>
			 </view>
			 <view class="item">
			 	<text>足迹</text>
			 	<u-icon name="arrow-right"></u-icon>
			 </view>
		</view>
		
		<!-- 底部 footer -->
		<view class="footer">
			 
		</view>
	</view>
</template>  

<style>
	page {
		background-color: #f4f4f4;
	} 
	/* 头部 */
	.header { 
		display: flex;
		position: relative;
	}
	.header image {
		width: 100%;
	}
	.header text {
		position: absolute;
		top: 44rpx;
		left: 54rpx;
		color: #fff;
	}
	
	/* 列表 */
	.list { 
		background-color: #fff;
		margin-top: 20rpx;
	}
	.list .item {
		height: 88rpx;
		border-bottom: 1px solid #606266;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}
	/* 最后一个元素不要边框 */
	.list .item:last-child{
		border-bottom: none;
	} 
</style>

(2) 视频

<template>
	<view>
		<video src="https://vod.pipi.cn/fec9203cvodtransbj1251246104/edced4778602268010651204870/v.f42905.mp4">
		</video>
	</view>
</template>

<style>
	video {
		width: 100%;
	} 
</style>

(3) 视频的描述

<template>
	<view class="box">
		<view class="left item">
			<image src="http://p0.meituan.net/moviemachine/c22241bf0509d3fde59754cc8501904999243.png" mode=""></image>
			<text>南归电影</text>
		</view>	
		<view class="right item">
			<view class="icon">
				<u-icon name="photo" color="#2979ff" size="28"></u-icon>
				<text>66</text>
			</view>
			<view class="icon">
				<u-icon name="photo" color="#2979ff" size="28"></u-icon>
				<text>66</text>
			</view>
			<u-icon name="photo" color="#2979ff" size="28"></u-icon>
		</view> 
	</view>
</template>

<style>
	page {
		background-color: #f4f4f4;
	}
	
	.box { 
		height: 50px;
		display: flex;
		background-color: #fff;
	}
	.box .item { 
		width: 50%;
		height: 100%;
	}
	.box image {
		width: 60rpx;
		height: 60rpx;
	}
	
	.box .left {
		display: flex;
		align-items: center;
		padding-left: 15px;
	}
	.box .left text {
		margin-left: 15px;
	}
	
	.box .right {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 10px;
		padding-right: 10px;
	}
	.box .right .icon {
		display: flex;
		align-items: center;
	}
	
</style>

(4) uview组件的使用

导航栏组件

<template>
	<view> 
		<u-navbar leftText="返回"
		title="个人中心"
		:autoBack="true"
		rightText="编辑" 
		placeholder 
		/>
		
		<view class="aa">
			2222222
		</view> 
	</view>
</template>

自定左侧或右侧的内容

<template>
	<view>
		<u-navbar leftText="返回" title="个人中心" :safeAreaInsetTop="false">
			<view class="u-nav-slot" slot="left">
				222222
			</view>
		</u-navbar>
	</view>
</template>

轮播图组件

<template>
	<u-swiper
	:list="list1"
	height="200"
	indicator
	indicatorMode="dot"
	:autoplay="true" 
	interval="500"
	:circular="true"
	/>
</template>

<script>
	export default {
		data() {
			return {
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				]
			}
		}
	}
</script>

第3.1节 css基础-小程序

第4节 JavaScript基础

css基础-uniapp #

(一) css基础 #

常用css样式目录 #

例1. 选择器和选择器优先级 #

例2. 边框 宽高 背景 #

例3. 圆角设置 #

例4. 文字大小、颜色、行高、加粗 #

例5. margin外边距设置 #

例6. padding 内边距 #

(二) css进阶 #

(1) 定位 #

例1. 固定定位 #

例2. 相对定位和绝对定位 #

例2.2 购物车上的数字 #

(2) 盒子尺寸计算方式 #

(3) 弹性盒子 #

例1. 水平对齐和垂直对齐方式 #

例2. 剩余空间分配 #

例3. 子元素纵向排列 #

例4. 多行排列 #

(4) 子元素在父元素内水平居中垂直居中 #

(三) 静态页面实战 #

(1) 个人中心 #

(2) 视频 #

(3) 视频的描述 #

(4) uview组件的使用 #

css基础-uniapp

(一) css基础

常用css样式目录

例1. 选择器和选择器优先级

例2. 边框宽高背景

例3. 圆角设置

例4. 文字大小、颜色、行高、加粗

例5. margin外边距设置

例6. padding 内边距

(二) css进阶

(1) 定位

例1. 固定定位

例2. 相对定位和绝对定位

例2.2 购物车上的数字

(2) 盒子尺寸计算方式

(3) 弹性盒子

例1. 水平对齐和垂直对齐方式

例2. 剩余空间分配

例3. 子元素纵向排列

例4. 多行排列

(4) 子元素在父元素内水平居中垂直居中

(三) 静态页面实战

(1) 个人中心

(2) 视频

(3) 视频的描述

(4) uview组件的使用